<!--
 @description 帮助中心列表
 @fileName List.vue
 @author zengqiongying
 @created 2022/02/22 14:05:03
-->
<template>
  <div class="help-center-list-page">
    <Header fixed arrow :show-search="false" />
    <div class="help-list-header">
      <div class="search-cell">
        <SearchInput ref="searchInput" v-model="searchValue" :class="['bg-search-input']" @focus="focusHandle" />
      </div>
      <div class="icon-menu" @click="showPop=true" />
    </div>
    <PopTree
      v-model="categoryId"
      :visible.sync="showPop"
    />

    <div class="help-center-list-main">
      <List
        ref="list"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
      >
        <Item v-for="(g,i) in list" :key="i" :g="g" @click.native.stop="handleClick(g)" />
      </List>
    </div>
  </div>
</template>

<script>

import Header from './components/Header'
import SearchInput from '@/components/SearchInput'
import List from './components/List'
import Item from './components/ListItem'
import PopTree from './components/PopTree'
import { getContentList } from '@/apis/helpCenter'

export default {
  name: 'HelpCenterList',
  components: {
    Header, SearchInput, List, Item, PopTree
  },
  data() {
    return {
      searchValue: '',
      categoryId: this.$route.query.cate || '',
      list: [],
      finished: false,
      showPop: false
    }
  },
  watch: {
    categoryId(val, oldVal) {
      this.resetPageData()
    }
  },
  created() {
    this.$on('refresh', this.resetPageData)
  },
  beforeDestroy() {
    this.showPop = false
  },
  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    async load(page, rows) {
      const params = {
        page,
        rows,
        categoryId: this.categoryId
      }
      return getContentList(params).then(res => {
        const data = res.data
        this.list.push(...data.records)
        if (data.total <= this.list.length) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    handleClick(g) {
      this.$router.push({ name: 'HelpCenterDetail', params: { id: g.id }, query: { c: this.categoryId }})
    },
    focusHandle() {
      this.$router.push({ name: 'HelpCenterSearch' })
    }
  }
}

</script>
<style lang="less" scoped>
.help-center-list-page{
  min-height: 100vh;
  width: 100vw;
  background-color: #fff;
  padding-top: 44PX;
  box-sizing: border-box;
  /deep/ .van-overlay{
    z-index: 900 !important;
  }
  /deep/ .van-popup--left{
    z-index: 901 !important;
  }
}
.help-list-header{
  position: fixed;
  width: 100%;
  z-index: 99;
  padding:10px;
  height: 44px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 2px 6px 0px rgba(115, 115, 115, 0.08);
  display: flex;
  align-items: center;
  align-content: space-between;
  .icon-menu{
    width: 22px;
    height: 22px;
    background: #333333;
    background:url(~@/assets/icon-menu.png) no-repeat;
    background-size: 22px 22px;
  }
  .search-cell{
    flex: 1;
    margin-right: 26px;
    height: 26px;
    background: #F5F6F7;
    border-radius: 13px;
    /deep/ .search-input{
      background:#F5F6F7;
      .search-value{
        background:#F5F6F7;
      }
    }
  }
}
.help-center-list-main{
  padding-top: 44px;
}
</style>
